import React, { useEffect, useState,  } from 'react'
import { CaretLeftOutlined } from '@ant-design/icons';
import Prism from 'prismjs';
import './PrismView.scss'
import { Drawer } from 'antd';
type Props = {
  html: string
}
function PrismView(props: Props) {
  const [Html, setHtml] = useState(props.html)
  const [open,setOpen] = useState(false)
  useEffect(() => {
    const html = Prism.highlight(Html, Prism.languages.javascript, 'javascript')
    setHtml(html)
  }, [])
  function show(){
    setOpen(true)
  }
  function hide(){
    setOpen(false)
  }
  function onClose(){
    setOpen(false)

  }
  PrismView.prototype.hide = hide
  PrismView.prototype.show = show
  return (
    <div>
      <div className='right-icon' onClick={show}>
      <CaretLeftOutlined />
      </div>
      <Drawer width={800} title="预览使用" placement="right" onClose={onClose}  open={open}>
      <pre style={{ whiteSpace: 'pre-wrap' }}>
        <div className="language-css" dangerouslySetInnerHTML={{ __html: Html }}></div>
      </pre>
    </Drawer>
    </div>
   
  )
}
export default PrismView